// 获取文章分类的列表
function initArtCateList() {
  $.ajax({
    method: 'GET',
    url: '/my/article/cates',
    success: function (res) {
      var str = template('tp1', res)
      $('#cateList').html(str)
    }
  })
}
initArtCateList()

var indexAdd = null
// 为添加类别按钮绑定点击事件
$('#btnAddCate').on('click', function () {
  indexAdd = layui.layer.open({
    type: 1,
    area: ['500px', '300px'],
    title: '添加文章分类',
    content: ` 
    <form class="layui-form" id="form-add">
    <div class="layui-form-item">
      <label class="layui-form-label">分类名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">分类别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  `
  })
})

// 通过代理的形式，为 form-add 表单绑定 submit 事件
$('body').on('submit', '#form-add', function (e) {
  e.preventDefault()
  $.ajax({
    method: 'POST',
    url: '/my/article/addcates',
    data: $(this).serialize(),
    success: function (res) {
      if (res.status !== 0) {
        return layer.msg('新增分类失败！')
      }
      initArtCateList()
      layer.msg('新增分类成功！')
      // 根据索引，关闭对应的弹出层
      layer.close(indexAdd)
    }
  })
})
//---------------------------------------------
// 点击编辑按钮展示修改文章分类的弹出层
var indexEdit = null
$('tbody').on('click', '.btn-edit', function () {
  // 弹出一个修改文章分类信息的层
  indexEdit = layer.open({
    type: 1,
    area: ['500px', '250px'],
    title: '修改文章分类',
    content: `
    <form class="layui-form" id="form-edit" lay-filter="form-edit">
    <!-- 隐藏域，保存 Id 的值 -->
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <label class="layui-form-label">分类名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">分类别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
      </div>
    </div>
  </form>
    `
  })
  // 为修改文章分类的弹出层填充表单数据
  var id = $(this).parent().attr('data-id')
  // console.log(id)
  // 发起请求获取对应分类的数据
  $.ajax({
    method: 'GET',
    url: '/my/article/cates/' + id,
    success: function (res) {
      layui.form.val('form-edit', res.data)
    }
  })
})

// 更新文章分类的数据
$('body').on('submit', '#form-edit', function (e) {
  e.preventDefault()
  $.ajax({
    method: 'POST',
    url: '/my/article/updatecate',
    data: $(this).serialize(),
    success: function (res) {
      if (res.status !== 0) {
        return layer.msg('更新分类数据失败！')
      }
      layer.msg('更新分类数据成功！')
      layer.close(indexEdit)
      initArtCateList()
    }
  })
})
//---------------------------------------------
// 删除文章分类
$('#cateList').on('click', '.btn-delete', function () {
  var id = $(this).parent().attr('data-id')
  // 提示用户是否要删除
  layui.layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
    $.ajax({
      method: 'GET',
      url: '/my/article/deletecate/' + id,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('删除分类失败！')
        }
        layer.msg('删除分类成功！')
        layer.close(index)
        initArtCateList()
      }
    })
  })
})
